﻿/***********************/
/** Layout formatting **/

.article {
    height: 100%;
}

#contentSection {
    width: 100%;
    height: 100%;
    overflow-x: auto;
    overflow-y: hidden;
}

    #contentSection #helper {
        height: 100%;
        width: 2000px; /* This is how wide the container needs to be for titleSection and content to float side by side*/
    }

    #contentSection #content {
        height: 100%;
        column-fill: auto;
        box-sizing: border-box;
        padding-bottom: 50px;
        padding-top: 50px;
        position: relative;
        -ms-user-select: text;
        margin-left: 350px;
        word-wrap: break-word;
    }

    #contentSection #titleSection {
        font-weight: bold;
        height: 100%;
        float: left;
        padding-top: 200px;
        padding-bottom: 50px;
        padding-left: 100px;
        padding-right: 50px;
    }

    #contentSection #content:after {
        /* this is a hack, but it is recommended by MSDN */
        content: '';
        background-color: transparent;
        float: right;
        height: 1px;
        margin-right: -120px;
    }



    /*****************************************/
    /** Layout formatting for portrait mode **/
    #contentSection.portraitMode {
        overflow-x: hidden;
        overflow-y: auto;
    }

        #contentSection.portraitMode #helper {
            height: auto;
            width: auto;
        }

        #contentSection.portraitMode #content {
            columns: auto auto;
            width: auto;
            padding-bottom: 50px;
            padding-top: 0;
            margin-left: 0; /* in portrait mode, left margin/padding gets set programmatically on contentSection */
        }

            /* this is a hack, but it is recommended by MSDN */
            #contentSection.portraitMode #content:after {
                float: none;
                display: block;
                height: 50px;
                margin-right: 0;
            }

        #contentSection.portraitMode #titleSection {
            height: auto;
            padding-top: 50px;
            padding-bottom: 25px;
            padding-right: 0;
            width: auto;
            float: none;
            padding-left: 0; /* in portrait mode, left margin/padding gets set programmatically on contentSection */
        }



    /*********************/
    /** Text formatting **/
    #contentSection #content p {
        text-indent: 1.75em;
    }

        #contentSection #content p:first-of-type {
            text-indent: 0em;
        }

    #contentSection #content a {
        color: cornflowerblue;
    }

    #contentSection #content img {
        display: block;
        margin-left: auto;
        margin-right: auto;
        margin-top: 0.5em;
        margin-bottom: 0.5em;

        padding: 5px;
        border: 1px solid grey;
    }

    #contentSection #content blockquote {
        text-indent: 0px;
        margin-left: 2em;
        margin-top: 0.5em;
        margin-bottom: 0.5em;
    }

    #contentSection #content p > big {
        margin-left: -1.33em; /* usually 2em of text-indent, but because we adjusted font-size */
        font-size: 150%;
        margin-top: 1.5em;
        margin-bottom: 0em;
    }

/*************/
/** Top appbar **/
#topappbar #articleBackButton {
    float: left;
    margin-top: 1em;
    margin-bottom: 1em;
    margin-left: 28px;
    margin-right: 28px;
}

#topappbar #headerPageTitle {
    float: left;
    margin-top: calc(1.5em + 10px);
    font-style: italic;
}

#topappbar #headerPageSubtitle {
    float: right;
    margin-top: calc(1.5em + 10px);
    margin-right: 28px;
    margin-bottom: 1.5em;
    font-style: italic;
}
